<template>
	<div class="bread-wrap flex">
		<div class="bread-box">
			当前位置：
			<!-- <router-link to="/"> 首页 </router-link>
      <span class="bread-divider">></span> -->

			<template v-if="$route.meta.deep == 2">
				<a href="javascript:void(0)">
					{{ $route.meta.root }}
				</a>
				<span class="bread-divider">></span>
			</template>

			<router-link to="">
				{{ $route.meta.title || "当前模块" }}
			</router-link>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		name: "bread-wrap",
		components: {},
		data() {
			return {};
		},
		created() {},
		methods: {},
	};
</script>

<style scoped lang="less">
	.bread-wrap {
		text-align: left;
		background: #fff;
		height: 40px;
		border-radius: 6px;
		padding: 0 20px;
		font-size: 14px;
		color: #606266;

		a {
			font-size: 14px;
			color: #606266;
		}
	}

	.bread-divider {
		margin: 0 5px;
	}
</style>